
import React, { useEffect, useState } from "react";
import moment from "moment";
import {
    Form,
    Rate,
    TimePicker,
    Checkbox,
    Cascader,
    Switch,
    Input,
    Select,
    Radio,
    InputNumber,
    DatePicker,
    Slider,
} from "antd";
import * as validateParams from "../config/validate";
import "./index.less";

const Option = Select.Option;
const CheckboxGroup = Checkbox.Group;
const { RangePicker } = DatePicker;

interface Props {
    list: Array<any>;
    setList: Function;
}

const Reduction = (props: Props) => {
    const { list, setList } = props;
    // render 表单
    function renderForm(arr) {
        return arr.map((item, index) => {
            return (
                <Form.Item
                    key={index}
                    label={item.label}
                    name={item.state}
                    hasFeedback
                    rules={[
                        {
                            required: item.required,
                            message: item.tips,
                        },
                        {
                            validator: validateParams[item.rule],
                        },
                    ]}
                >
                    {renderSwatch(item, index)}
                </Form.Item>
            );
        });
    }
    // render 表单类型判定
    function renderSwatch(item, index: number) {
        switch (item.type) {
            case "Input":
                return (
                    <Input
                        allowClear={
                            item.allowClear === undefined
                                ? true
                                : item.allowClear
                        }
                        onChange={checkNoSpace.bind(this, index)}
                        placeholder={item.tips}
                        value={item.value}
                    />
                );
            case "InputNumber":
                return (
                    <InputNumber
                        min={item.min}
                        onChange={checkNoSpace.bind(this, index)}
                        placeholder={item.tips}
                        value={item.value}
                    />
                );
            case "Select":
                return (
                    <Select
                        showSearch
                        mode={item.mode}
                        onChange={checkNoSpace.bind(
                            this,
                            item.state,
                            item.labelVal
                        )}
                        placeholder={item.tips}
                        allowClear={
                            item.allowClear === undefined
                                ? true
                                : item.allowClear
                        }
                        value={item.value}
                        filterOption={(input, option) =>
                            (option!.children as unknown as string).includes(
                                input
                            )
                        }
                    >
                        {item.options.map((its) => {
                            return (
                                <Option key={its.value} value={its.value}>
                                    {" "}
                                    {its.label}{" "}
                                </Option>
                            );
                        })}{" "}
                    </Select>
                );
            case "Radio":
                return (
                    <Radio.Group
                        onChange={checkNoSpace.bind(this, index)}
                        value={item.value}
                    >
                        {item.options.map((its) => {
                            return (
                                <Radio key={its.value} value={its.value}>
                                    {" "}
                                    {its.label}{" "}
                                </Radio>
                            );
                        })}
                    </Radio.Group>
                );
            case "Checkbox":
                return (
                    <CheckboxGroup
                        onChange={checkNoSpace.bind(this, index)}
                        options={item.options}
                        value={item.value}
                    />
                );
            case "Rate":
                return (
                    <Rate
                        allowClear={
                            item.allowClear === undefined
                                ? true
                                : item.allowClear
                        }
                        onChange={checkNoSpace.bind(this, index)}
                        allowHalf
                        value={item.value}
                    />
                );
            case "Switch":
                return (
                    <Switch
                        onChange={checkNoSpace.bind(this, index)}
                        checked={item.value}
                    />
                );
            case "Slider":
                return (
                    <Slider
                        onChange={checkNoSpace.bind(this, index)}
                        value={item.value}
                        disabled={item.disabled}
                    />
                );
            case "Cascader":
                return (
                    <Cascader
                        onChange={checkNoSpace.bind(this, index)}
                        allowClear={
                            item.allowClear === undefined
                                ? true
                                : item.allowClear
                        }
                        value={item.value}
                        options={item.options}
                        placeholder={item.tips}
                    />
                );
            case "TimePicker":
                return (
                    <TimePicker
                        onChange={checkNoSpace.bind(this, index)}
                        value={item.value}
                    />
                );
            case "DatePicker":
                return (
                    <DatePicker
                        onChange={checkSetTime.bind(this, index)}
                        placeholder={item.tips}
                        value={item.value}
                    />
                );
            case "RangePicker":
                return (
                    <RangePicker
                        format={item.format ? item.format : "YY-MM-DD HH:mm:ss"}
                        showTime
                        allowClear={
                            item.allowClear === undefined
                                ? true
                                : item.allowClear
                        }
                        value={item.value}
                        showNow={false}
                        placeholder={item.tips}
                        onChange={checkSetArrTime.bind(this, index)}
                        onOk={checkSetArrTime.bind(this, index)}
                    />
                );
            default:
                return "";
        }
    }
    // 时间选择传值
    function checkSetTime(index, val) {
        let newList = [...list];
        newList[index].value = moment(val._d).format("YYYY-MM-DD");
        setList(newList);
    }
    // 时间区间选择传值
    function checkSetArrTime(index, val) {
        let param;
        if (val === null) param = val;
        else if (val[1] != null) param = moment(val[1]._d).format("YYYY-MM-DD");
        else param = moment(val[0]._d).format("YYYY-MM-DD");

        let newList = [...list];
        newList[index].value = param;
        setList(newList);
    }
    // 表单传值
    function checkNoSpace(index, e) {
        let param = e && e.target ? e.target.value : e;
        let newList = [...list];
        newList[index].value = param;
        setList(newList);
    }
    return <Form>{renderForm(list)}</Form>;
};

export default Reduction;
